<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Goods Manager</title>
    <link rel="stylesheet" href="../../layui-v2.9.10/layui/css/layui.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }
        .layui-header {
            background-color: #303030;
            color: #fff;
            padding: 0 15px;
        }
        .layui-side, .layui-layout-admin .layui-body, .layui-footer {
            background-color: #f5f5f5;
            color: #333;
        }
        .layui-card-header {
            background-color: #303030;
            color: #fff;
        }
        .layui-card-body {
            background-color: #fff;
            color: #333;
        }
        .layui-layout-admin .layui-body {
            padding: 15px;
        }
        .layui-table-cell {
            height: auto;
            white-space: normal;
        }
        .layui-table-cell img {
            max-width: 100px;
            max-height: 100px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 头部导航 -->
    <div class="layui-header">
        <jsp:include page="header.jsp" />
    </div>

    <!-- 侧边栏 -->
    <div class="layui-side">
        <jsp:include page="side.jsp" />
    </div>

    <!-- 主体内容区 -->
    <div class="layui-body" style="padding: 20px;">
        <!-- 搜索表单 -->
        <div>
            <form class="layui-form layui-row layui-col-space16" method="post" action="../../SearchServlet.do">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <input type="text" name="goods_id" placeholder="Goods ID" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <input type="text" name="goods_category" placeholder="Goods Category" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <input type="text" name="created_at" readonly placeholder="Created At" class="layui-input demo-table-search-date">
                    </div>
                </div>
                <div class="layui-btn-container layui-col-xs12">
                    <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                </div>
            </form>

            <!-- 查询结果表格 -->
            <h1 style="margin-bottom: 20px;">商品管理</h1>
            <div class="layui-card">
                <div class="layui-card-body">
                    <table id="goodsTable" lay-filter="goodsTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- layui 引入 -->
<script src="../../layui-v2.9.10/layui/layui.js"></script>
<script>
    layui.use(['table', 'layer'], function(){
        var table = layui.table;
        var layer = layui.layer;

        // 从 JSP 页面中获取 searchResults 数据
        var searchResults = [
            <c:forEach var="goods" items="${sessionScope.searchResults}" varStatus="status">
            {
                goods_id: '${goods.goods_id}',
                created_at: '${goods.created_at}',
                good_image: '${goods.goods_image}',
                goods_info: '${goods.goods_info}',
                goods_category: '${goods.goods_category}',
                goods_price: '${goods.goods_price}'
            }<c:if test="${!status.last}">,</c:if>
            </c:forEach>
        ];

        // 渲染表格
        table.render({
            elem: '#goodsTable',
            cols: [[
                {field: 'goods_id', title: 'Goods ID', width: 80, sort: true, fixed: 'left'},
                {field: 'goods_info', title: 'Goodss Info', width: 150},
                {field: 'goods_image', title: 'Goods Image', width: 200, templet: '<div><img src="{{d.goods_image}}" style="max-width: 100px; max-height: 100px;"></div>'},
                {field: 'goods_category', title: 'Goods Category', width: 150},
                {field: 'goods_price', title: 'Goods Price', width: 150},
                {field: 'created_at', title: 'Created At', width: 150},
                {fixed: 'right', title: 'action', toolbar: '#actionButtons', width: 180}
            ]],
            data: searchResults,
            page: true,
            skin: 'line',
            even: true
        });

        // 监听工具条
        table.on('tool(goodsTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'view'){
                viewGoods(data.goods_id);
            } else if(obj.event === 'edit'){
                editGoods(data.goods_id);
            } else if(obj.event === 'disable'){
                disableGoods(data.goods_id);
            }
        });

        // 查看商品
        function viewGoods(goodsId){
            window.location.href = '<%= request.getContextPath() %>/ViewGoodsServlet?id=' + goodsId;
        }

        // 编辑商品
        function editGoods(goodsId){
            window.location.href = '<%= request.getContextPath() %>/EditGoodsServlet?id=' + goodsId;
        }

        // 下架商品
        function disableGoods(goodsId){
            layer.confirm('确定要下架该商品吗？', function(index){
                // 实际操作的逻辑，这里可以是 AJAX 请求或者直接跳转等
                window.location.href = '<%= request.getContextPath() %>/DisableGoodsServlet?id=' + goodsId;
                layer.close(index);
            });
        }
    });
</script>

<script type="text/html" id="actionButtons">
    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="disable">下架</a>

</script>

</body>
</html>
